<template>
  <div class="search-form">
    <el-form ref="searchForm" :inline="true" :model="form_data">
      <el-form-item
        v-for="item in searchConfig"
        :key="item.prop"
        :label="item.label"
      >
        <!-- 文本框 -->
        <el-input
          v-if="item.type == 'input'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请输入'"
          size="mini"
          clearable
        ></el-input>
        <!-- 下拉框 -->
        <el-select
          :style="`width:${item.width}`"
          v-else-if="item.type == 'select'"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          size="mini"
          clearable
          filterable
        >
          <el-option
            v-for="optionItem in item.options"
            :key="optionItem.value"
            :label="optionItem.label"
            :value="optionItem.value"
          ></el-option>
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-else-if="item.type == 'date'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="date"
          :value-format="item.format ? item.format : 'yyyy-MM-dd'"
          :format="item.format ? item.format : 'yyyy-MM-dd'"
          size="mini"
        >
        </el-date-picker>
        <!-- 月份 -->
        <el-date-picker
          v-else-if="item.type == 'month'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="month"
          :value-format="item.format ? item.format : 'yyyy-MM'"
          :format="item.format ? item.format : 'yyyy-MM'"
          size="mini"
        >
        </el-date-picker>
        <!-- 年份 -->
        <el-date-picker
          v-else-if="item.type == 'year'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="year"
          :value-format="item.format ? item.format : 'yyyy'"
          :format="item.format ? item.format : 'yyyy'"
          size="mini"
        >
        </el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
          v-else-if="item.type == 'daterange'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="item.format ? item.format : 'yyyy-MM-dd'"
          :format="item.format ? item.format : 'yyyy-MM-dd'"
          size="mini"
        >
        </el-date-picker>
        <!-- 级联 -->
        <el-cascader
          v-else-if="item.type == 'cascader'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          :options="item.options"
          size="mini"
          filterable
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    searchConfig: {
      type: Array,
      default: () => [],
    },
    form_data: {
      type: Object,
      default: () => {},
    },
  },
  created() {},
  data() {
    return {};
  },
  methods: {
    // 搜索
    search() {
      this.$emit("search");
    },
    // 重置
    reset() {
      let reset_form = {};
      this.searchConfig.forEach((item) => {
        if (item.defaultValue) {
          this.$set(reset_form, item.prop, item.defaultValue);
        }
      });
      this.$emit("update:form_data", JSON.parse(JSON.stringify(reset_form)));
      // 重置表单之后，调用搜索方法
      this.$nextTick(() => this.$emit("reset"));
    },
  },
};
</script>
